<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>分享赚钱</title>
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1276161347'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1276161347' type='text/javascript'%3E%3C/script%3E"));</script>

    <script>
    (function(designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }

        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();

        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);

        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
    </script>
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    
    <![endif]-->
    <script src="__PUBLIC__/js/jquery.min.js"></script>

    <style>
       *{margin:0;padding:0;}
       html,body{width:100%;height:100%;}
       .share-container{width:100%;height:100%;background-color:#F2F2F2;}    
       .share-wrapper{display: flex;display:-webkit-box;flex-direction:column;-webkit-box-orient:vertical;height:100%;}
       .tabbar-list{list-style:none;display:flex;align-items:center;display:-webkit-box;--webkit-box-align: center;background-color:#ffffff;border-bottom: 0.02rem solid #eaeaea;}
       .tabbar-item{
           height:0.84rem;flex:1;-webkit-box-flex: 1;
           width:100%;font-size:0.3rem;color:#999999;
           line-height:0.84rem;text-align:center;position:relative;
        }
       .tabbar-item::before{
           content:'';
           width:0px;
           height:0.04rem;
           background-color: #f44d44;
           position: absolute;
           bottom:0;
           left:50%;
           transform: translateX(-50%); 
           transition: all 0.3s;
           border-radius:0.7rem;
       }
       .tabbar-item.on{color:#333333;font-weight:bold;}
       .tabbar-item.on::before{
           width:100%;
       }
       .share-server{
           flex:1;
           -webkit-box-flex:1;
           height:100%;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch;
       }
       .server-list{list-style:none;margin-top:0.2rem;}
       .server-item{
           display: flex;
           display: -webkit-box;
           align-items:center;
           -webkit-box-align:center;
           padding:0.2rem;
           box-sizing:border-box;
           margin-bottom:0.2rem;
           background-color:#ffffff;
       }
       .item-left{border-radius: 0.1rem;overflow: hidden;font-size:0;margin-right:0.2rem;}    
       .item-left img{width:1.4rem;height:1.4rem;}
       .item-left .item-type{
            font-size:0.24rem;
            width:100%;
            height:0.4rem;
            line-height:0.4rem;
            background-color:#fd997f;
            text-align:center;
            display:block;
            color:#ffffff;
        }
        .item-center{flex: 1;-webkit-box-flex:1;width:100%;overflow:hidden;}
        .item-center .item-title{font-size:0.3rem;color:#333333;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
        .item-center .item-txt{font-size:0.24rem;color:#999999;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;margin:0.2rem 0;}
        .item-center .item-discount{display: flex;display: -webkit-box;}
        .item-center .item-discount .item-money{font-size:0.24rem;color:#f44d44;vertical-align: middle;}
        .item-center .item-discount .item-money strong{font-size:0.4rem;color:#f44d44;}
        .item-center .item-discount .item-prize{
            width:1.25rem;
            height:0.4rem;
            display: inline-block;
            background:url('__PUBLIC__/images/shareHD/fxzq_jiang01.png') 0% 0% /100% 100% no-repeat;
            text-align: center;
            font-size:0.24rem;
            color:#ffffff;
            line-height:0.4rem;
        }
        .item-center .item-discount .item-coupon{
            width:1.25rem;
            height:0.4rem;
            display: inline-block;
            background:url('__PUBLIC__/images/shareHD/fxzq_quan01.png') 0% 0% /100% 100% no-repeat;
            text-align: center;
            font-size:0.24rem;
            color:#ffffff;
            line-height:0.4rem;
        }
        .item-right .item-job{
            width:1.4rem;
            height:0.5rem;
            text-align:center;
            line-height:0.5rem;
            border:1px solid #f44d44;
            color:#f44d44;
            border-radius:0.7rem;
            font-size:0.24rem;
            margin:0 auto 0.05rem;
        }
        .item-right .item-love{
            font-size:0.2rem;
            color:#666666;
        }
        /* point */
        .point-container{
            position: fixed;
            width:100%;
            height:100%;
            left:0;
            right:0;bottom:0;
            top:0;
            display: none; 
        }
        .point-item{display: none;width: 100%;height:100%;}
    </style>
</head>
<body>
    <main class="share-container">
        <div class="share-wrapper">
            <section class="share-tabbar">
				<h1 style="font-size:0.26rem;padding:0.2rem 0.3rem;background-color:#ffffff;color:#333333;">您分享后如有其它人完成测算，您将获得奖券中的数额的现金提成</h1>
                <!-- <ul class="tabbar-list"> -->
                    <!-- <li class="tabbar-item">全部</li> -->
                    <!-- <li class="tabbar-item">事业运势</li>-->
                    <!--<li class="tabbar-item">八字精批</li>-->
                    <!--<li class="tabbar-item">姻缘走势</li> -->
                <!-- </ul> -->
            </section>
            <section class="share-server">
                <ul class="server-list">
                   <foreach name="priceArr" item="value">
                       <li class="server-item" data-url="<!--{$value['jumpUrl']}-->">
                           <div class="item-left"><img src="<!--{$value['img']}-->" alt=""><span class="item-type">多人分享</span></div>
                           <div class="item-center">
                               <h2 class="item-title"><!--{$value['csName']}--></h2>
                               <p class="item-txt"><!--{$value['text']}--></p>
                               <div class="item-discount">
                                   <if condition="$value['discount'] eq 0">
                                       <div class="item-money">￥<strong><!--{$value['price']}--></strong>原价</div>
                                       <div class="item-prize">奖￥<!--{$value['bouns']}--></div>
                                       <else />
                                       <div class="item-money">￥<strong><!--{$value['price']}--></strong>券后</div>
                                       <div class="item-prize">奖￥<!--{$value['bouns']}--></div>
                                       <div class="item-coupon">券￥<!--{$value['discount']}--></div>
                                   </if>

                               </div>
                           </div>
                           <div class="item-right">
                               <div class="item-job">分享领奖</div>
                               <p class="item-love"><!--{$value['csNumber']}-->人测过</p>
                           </div>
                       </li>
                   </foreach>

                </ul>
            </section>
            <aside class="point-container">
                <img src="__PUBLIC__/images/shareHD/point01.png" class="point-item" width="100%" alt="">
                <img src="__PUBLIC__/images/shareHD/point02.png" class="point-item" width="100%" alt="">
                <img src="__PUBLIC__/images/shareHD/point03.png" class="point-item" width="100%" alt="">
            </aside>
        </div>
    </main>
   <script>
       const TABBAR_INDEX = 0; // 默认服务类型
       var ISSHOW_POINT = null; // 是否显示提示
        // 初始化
       $(function(){
           $('.tabbar-item').eq(TABBAR_INDEX).addClass('on');
           ISSHOW_POINT = localStorage.getItem('ISSHOW_POINT')?0:1;
           if(ISSHOW_POINT){
               $('.point-container').show();
               $('.point-item').eq(0).show();
            }
       })

       $('.tabbar-item').on('click',function(){
           $(this).addClass('on').siblings().removeClass('on');
       })
       $('.server-item').click(function(){
           window.location.href = $(this).attr('data-url');
       })
       var flag = true;
       $('.share-server').on('scroll',function (e){
           let aviheight = $(this).height();
           let scrollTop = $(this)[0].scrollTop;
           let scrollHeight = $(this)[0].scrollHeight; 
           if(scrollHeight - aviheight <= scrollTop){
                if(flag){
                    flag = false;
                    setTimeout(function(){ 
                        console.log('加载数据')
                        flag = true;
                    },300)
                }
           }    
       })
        // point chekout
       $('.point-item').click(function(){
           let index = $(this).index();
           if(index < 2){
                $(this).hide()
                $(this).next().show();
           }else if(index == 2){
               $('.point-container').hide();
               localStorage.setItem('ISSHOW_POINT',0)
           }
       })
   </script>
</body>
</html>